<template>
  <div class="v-diagram-config-left-area">
    <SearchNode
      v-if="treeSelectModel.lazy"
      :projectId="treeSelectModel.currentProjectId"
      @selectNode="treeSelectModel.selectOnTree($event)"
    />
    <el-tabs
      v-model="treeSelectModel.curTab"
      type="card"
      class="g-panel-tabs"
      @tab-click="handleTabClick"
    >
      <el-tab-pane
        v-loading="treeSelectModel.loading"
        class="g-panel-tabs"
        name="tree"
      >
        <template #label>
          <m-tab-item :label="$t('树')" />
        </template>
        <div
          class="g-pd-lr-20 g-pd-b-20 g-pd-t-10"
          style="height: 100%; position: relative"
        >
          <SelectTree
            :treeData="treeSelectModel.treeData"
            :checkable="treeSelectModel.checkable"
            :showNodeLabel="treeSelectModel.showNodeLabel"
            :lazy="treeSelectModel.lazy"
            :getChildren="treeSelectModel.getChildren"
            :loadNodes="treeSelectModel.loadNodes.bind(treeSelectModel)"
            @addSelectedNodeToRight="nodeDbClick"
            @handleNodeClick="treeSelectModel.handleNodeClick($event)"
          ></SelectTree>
          <NoData v-if="treeSelectModel.visibleDataLength <= 0"></NoData>
        </div>
      </el-tab-pane>

      <el-tab-pane
        v-if="diagramCustomizationManagementModel.activeTab === AttributeTabKey.ComponentsConfiguration"
        v-loading="treeSelectModel.loading"
        class="g-panel-tabs"
        name="common"
      >
        <template #label>
          <m-tab-item :label="$t('通用')" />
        </template>
        <div
          class="g-pd-lr-20 g-pd-b-20 g-pd-t-10"
          style="height: 100%; position: relative"
        >
          <CommonCompTree
            :commonTreeData="treeSelectModel.commonTreeData"
            @handleCommonNodeClick="treeSelectModel.handleCommonNodeClick($event)"
            @dblclickCommon="nodeDbClick"
          ></CommonCompTree>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!--  <div class="operate-area">
    <el-button :icon="Plus" :disabled="treeSelectModel.disableSelected" @click="treeSelectModel.addSelectedNodeToRight()"></el-button>
  </div> -->
</template>
<script lang="ts" setup>
import { AttributeTabKey } from "@/constants/Enums";
import SearchNode from "@/common/SearchModel/SearchNode.vue";
import MTabItem from "@/modules/model/comps/common/TabItem.vue";
import NoData from "@/modules/model/comps/station/sider/attribute/noData.vue";
import SelectTree from "./SelectTree.vue";
import CommonCompTree from "./CommonCompTree.vue";
import { TreeSelectModel } from "./TreeSelectModel";
import { DiagramCustomizationManagementModel } from "../../DiagramCustomizationManagementModel";

const props = defineProps<{
  treeSelectModel: TreeSelectModel;
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();

const emit = defineEmits<{
  (event: "nodeDbClick"): void;
}>();

const nodeDbClick = () => {
  emit("nodeDbClick");
};

const handleTabClick = tab => {
  props.treeSelectModel.handleTabClick(tab.paneName);
};
</script>

<style lang="scss" scoped>
.v-diagram-config-left-area {
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e4e4;
  :deep(.search_shade) {
    border: none;
  }
  :deep(.el-input__wrapper) {
    box-shadow: none;
    border-bottom: 1px solid #e4e4e4;
  }
  .g-panel-tabs {
    overflow: hidden;
  }
}
</style>
